<template>
  <div id="bugClassifyChart">
    <div class="search">
      <el-select @change="getInfo" v-model="bugProject" placeholder="请选择项目序号"
                 style="width: 180px; margin-left: 30px">
        <el-option
            v-for="(item,i) in project"
            :key="i"
            :value="item">
        </el-option>
      </el-select>
    </div>
    <div id="chart"></div>
  </div>
</template>

<script>
export default {
  name: "BugClassifyChart",
  data() {
    return {
      bugProject: '',
      project: [],
      classify: {
        dataError: 0,
        checkParam: 0,
        interfaceLayout: 0,
        notEnoughDemand: 0
      },
      label: true,
      labelLine: true
    }
  },
  mounted() {
    this.drawLine();
  },
  created() {
    this.getAllProject();
  },
  methods: {
    getAllProject() {
      this.$axios
          .get("/chart/allProject", {headers: {"token": localStorage.getItem("token")}})
          .then((resp) => {
            this.project = resp.data.data
          })
    },
    getInfo(val) {
      this.$axios
          .get("/chart/getProjectInfoOfClassify", {
            params: {
              projectId: val
            },
            headers: {"token": localStorage.getItem("token")}
          })
          .then((resp) => {
            this.classify = resp.data.data;
            this.drawLine();
          })
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(document.getElementById('chart'))
      // 绘制图表
      chart.setOption({
        title: {
          text: '项目缺陷分类占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            color: ['green', 'blue', 'red', 'orange'],
            data: [
              {value: this.classify.dataError, name: '数据错误', label: this.label, labelLine: this.labelLine},
              {value: this.classify.checkParam, name: '参数校验', label: this.label, labelLine: this.labelLine},
              {value: this.classify.interfaceLayout, name: '界面排版', label: this.label, labelLine: this.labelLine},
              {value: this.classify.notEnoughDemand, name: '未满足需求', label: this.label, labelLine: this.labelLine}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  }
}
</script>

<style scoped>
#bugClassifyChart {
  width: 600px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 auto;
}

.search {
  padding-top: 30px;
}

#chart {
  width: 500px;
  height: 500px;
  margin: 30px auto;
}
</style>